
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Please sign in</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var uname = $("#username").val();
                var pwd = $("#password").val();
                var txtcode = $("#txtcode").val();
                $.ajax({
                    url : "/login",
                    type : "post",
                    dataType : "json",
                    data : {
                        "username":uname,
                        "password":pwd,
                        "code":txtcode,
                    },
                    success:function (data) {
                        alert(data.code + "----------" + data.msg);

                        if (data.code === 0){
                            window.location = "/hello"
                        }

                    }
                })

            })

        })

        function changeCode() {
            //new Date 目的是浏览器不使用缓存，每次获取新的内容
            var url="/captcha/code?t="+new Date();
            $("#imageCode").attr("src",url)
        }

    </script>
</head>
<body>
<div class="container">
    <form class="form-signin" method="post" action="/login">
        <h2 class="form-signin-heading">Please sign in</h2>
        <p>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
        </p>
        <p>
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
            <img id="imageCode" src="/captcha/code" />
            <a href="javascript:void(0)" onclick="changeCode()">重新获取</a>
            <br><br>
            验证码：<input type="text" id="txtcode"/><br>
        </p>
        <input name="_csrf" type="hidden" value="501f5275-65f5-49a1-87c5-1df2a4382fb8" />
        <button type="button" class="btn btn-lg btn-primary btn-block" id="btn">Sign in</button>
    </form>
</div>
</body></html>